<div>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button
                type="button"
                class="navbar-toggle collapsed"
                data-toggle="collapse"
                data-target="#navbar-main"
                aria-expanded="false"
            >
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <i class="fa fa-home"></i>
                <span>Hello World</span>
            </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="navbar-main">
            <ul class="nav navbar-nav" data-bind="foreach: getRootRouter()">
                <!-- ko if:$data.hasChild===undefined -->
                <li data-bind="css: { active: isActive }">
                    <a data-bind="attr: { href: hash }, text: title"></a>
                </li>
                <!-- /ko -->
                <!-- ko ifnot:$data.hasChild===undefined -->
                <li role="presentation" class="dropdown">
                    <a
                        class="dropdown-toggle"
                        data-toggle="dropdown"
                        href="#"
                        role="button"
                        aria-haspopup="true"
                        aria-expanded="false"
                    >
                        <span data-bind="text: title"></span>
                        <span class="caret"></span>
                    </a>
                    <ul
                        class="dropdown-menu"
                        data-bind="foreach:$root.getChildRouter(hash)"
                    >
                        <li data-bind="css: { active: isActive }">
                            <a
                                data-bind="attr: { href: hash }, text: title"
                            ></a>
                        </li>
                    </ul>
                </li>
                <!-- /ko -->
            </ul>
        </div>
    </nav>

    <!-- <div class="page-host container-fluid main-container" data-bind="router: { transition:'entrance' }"></div> -->
    <div
        class="page-host container-fluid main-container"
        data-bind="router: {}"
    ></div>
</div>
